<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/bootstrap.css">
    <link rel="stylesheet" href="../css/owl.carousel.css">
    <script src="../js/jquery.min.js"></script>
    <script src="../js/bootstrap.js"></script>
    <script src="../js/owl.carousel.js"></script>
    <title>我的响应式网站</title>
</head>
<style>
    /* 导航栏开始 */
    
    .header_bg {
        background-color: #91cce7;
    }
    
    .navbar {
        margin-bottom: 0px;
        border: 0px;
    }
    
    .header_bg .container .header h1 a {
        font-size: 24px;
        margin: 10px 30px;
        font-family: '微软雅黑';
        color: #3B3B3B;
        text-decoration: none;
    }
    
    .header_bg .container .navbar .navbar-nav {
        list-style-type: none;
        background-color: #91cce7;
    }
    
    .header_bg .container .navbar .navbar-nav li a {
        color: #3B3B3B;
        font-size: 16px;
    }
    
    .header_bg .container .navbar .navbar-nav li:hover {
        background-color: #fff;
    }
    
    .navbar-header {
        background-color: #51505a;
    }
    
    .navbar-default .navbar-nav>.active>a,
    .navbar-default .navbar-nav>.active>a:hover,
    .navbar {
        background-color: #fff;
    }
    
    .navbar-collapse {
        padding: 0px;
    }
    
    .active {
        background: #fff;
    }
    
    .clear {
        clear: both;
    }
    /* 导航栏结束 */
    /* 影集 */
    
    .picture h1 {
        text-align: center;
    }
    
    #owl-demo {
        width: 100%;
        background: #335577;
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        justify-content: space-between !important;
        align-content: stretch !important;
        align-items: center !important;
    }
    
    .picture {
        margin: 0px 300px;
    }
    
    .lazyOwl {
        width: 100%;
    }
    /*科学家*/
    
    .box1 {
        margin: 5px 0;
        height: 342px;
    }
    
    .row h1 {
        text-align: center;
    }
    
    .row img {
        height: 200px;
        height: 200px;
    }
    /* 联系我们 */
    
    #contact {
        margin-top: 10px;
    }
    
    #contact h1 {
        text-align: center;
    }
    
    .ipt {
        text-align: center;
    }
    
    .footer {
        margin: 20px 0;
        text-align: center;
    }
    
    .ultag {
        list-style: none;
    }
</style>
<script>
    $(document).ready(function() {
        $('#owl-demo').owlCarousel({
            items: 1,
            singleItem: true,
            lazyLoad: true,
            autoPlay: 3000,
            rewindNav: false,
            scrollPerPage: true,
            pagination: true,
            paginationNumbers: true,
        });
    });
</script>

<body>
    <!-- 导航栏 -->
    <div class="header_bg">
        <div class="container">
            <div class="header">
                <h1><a href="index.html">我的响应式网站</a></h1>
            </div>
            <nav class="navbar navbar-default navbar-left" role="navigation">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                      <span class="sr-only">Toggle navigation</span>
                      <span class="icon-bar"></span>
                      <span class="icon-bar"></span>
                      <span class="icon-bar"></span>
                    </button>
                </div>
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="index.html">我的影集</a></li>
                        <li><a href="#scientist">科学家介绍</a></li>
                        <li><a href="technology.html">热门技术</a></li>
                        <li><a href="#contact">联系我们</a></li>
                    </ul>
                </div>
            </nav>
            <div class="clear"></div>
        </div>
    </div>

    <!-- 影集 -->
    <class class="picture">
        <div class="container">
            <div class="col-md-12 col-xs-12">
                <h1>我的影集</h1>
                <div id="owl-demo" class="owl-carousel text-center">
                    <div class="item">
                        <div class="cau_left">
                            <img class="lazyOwl" data-src="../images/blog_pic1.jpg" alt="Lazy Owl Image">
                        </div>
                    </div>
                    <div class="item">
                        <div class="cau_left">
                            <img class="lazyOwl" data-src="../images/blog_pic2.jpg" alt="Lazy Owl Image">
                        </div>
                    </div>
                    <div class="item">
                        <div class="cau_left">
                            <img class="lazyOwl" data-src="../images/det_pic3.jpg" alt="Lazy Owl Image">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </class>

    <!-- 科学家 -->
    <div class="container-fluid">
        <div id="scientist">
            <div class="row">
                <h1>著名科学家介绍</h1>
                <div class="col-md-6 col-xs-12 box1" style="text-align: center;">
                    <p style="text-align: center;color: rgb(40, 180, 145);">牛顿</p>
                    <img src="../images/newton.PNG" alt="newton">
                    <p style="text-indent: 2em;">艾萨克·牛顿（1643年1月4日—1727年3月31日）爵士，英国皇家学会会长，英国著名的物理学家，百科全书式的“全才”，著有《自然哲学的数学原理》、《光学》。在力学上，牛顿阐明了动量和角动量守恒的原理，提出牛顿运动定律。在光学上，他发明了反射望远镜，并基于对三棱镜将白光发散成可见光谱的观察，发展出了颜色理论。他还系统地表述了冷却定律，并研究了音速。在经济学上，牛顿提出金本位制度。</p>
                </div>

                <div class="col-md-6 col-xs-12 box1" style="text-align: center;">
                    <p style="text-align: center;color: rgb(40, 180, 145);">莱布尼茨</p>
                    <img src="../images/lbnc.jpg" alt="lbnc">
                    <p style="text-indent: 2em;">戈特弗里德·威廉·莱布尼茨（Gottfried Wilhelm Leibniz，1646年7月1日－1716年11月14日），德国哲学家、数学家，历史上少见的通才，被誉为十七世纪的亚里士多德。莱布尼茨在数学史和哲学史上都占有重要地位。在数学上，他和艾萨克·牛顿先后独立发现了微积分，而且他所使用的微积分的数学符号被更广泛的使用，莱布尼茨所发明的符号被普遍认为更综合，适用范围更加广泛。</p>
                    <br>
                </div>

                <div class="col-md-6 col-xs-12 box1" style="text-align: center;">
                    <p style="text-align: center;color: rgb(40, 180, 145);">特斯拉</p>
                    <img src="../images/tsl.jpg" alt="tsl">
                    <p style="text-indent: 2em;">尼古拉·特斯拉（Nikola Tesla，1856年7月10日—1943年1月7日），塞尔维亚裔美籍发明家、物理学家、机械工程师、电气工程师。1897年，他使马可尼的无线电通信理论成为现实。1898年，他制造出世界上第一艘无线电遥控船，无线电遥控技术取得专利。1899年，他发明了X光（X-Ray）摄影技术。</p>

                </div>

                <div class="col-md-6 col-xs-12 box1" style="text-align: center;">
                    <p style="text-align: center;color: rgb(40, 180, 145);">爱迪生</p>
                    <img src="../images/ads.jpg" alt="ads">
                    <p style="text-indent: 2em;">托马斯·阿尔瓦·爱迪生（Thomas Alva Edison，1847年2月11日—1931年10月18日），出生于美国俄亥俄州米兰镇，逝世于美国新泽西州西奥兰治。世界著名的发明家、物理学家、企业家，拥有众多知名重要的发明专利超过2000项。包括对世界极大影响的留声机、电影摄影机、钨丝灯泡等。被传媒授予“门洛帕克的奇才”称号!美国《生活》杂志评选出千年来全球最有贡献的一百位人物，发明电灯的美国发明家爱迪生名列榜首。爱迪生被美国的权威期刊《大西洋月刊》评为影响美国的100位人物第9名。</p>
                </div>
            </div>
        </div>
    </div>

    <!-- 联系我们 -->
    <div id="contact" class="container-fluid">
        <h1>联系我们</h1>
        <div class="col-md-4 col-xs-12">
            <h3>与我们联系</h3>
            <ul class="ultag">
                <li>通讯地址：河南省信阳市南湖路237号</li>
                <li>邮政编码：464000</li>
                <li>学校网址：http://www.xynu.edu.cn/</li>
                <li>招生网址：http://zsjy.xynu.edu.cn/</li>
                <li>咨询电话：0376-6391212</li>
                <li>招生QQ：2967927356</li>
            </ul>
        </div>
        <div class="col-md-8 col-xs-12">
            <h3>在线提问</h3>
            <form action="#">
                <div class="col-md-6 col-xs-12">
                    <label for="username">姓名：</label>
                    <input type="text" class="form-control" id="username">
                </div>
                <div class="col-md-6 col-xs-12">
                    <label for="email"> 邮箱： </label>
                    <input type="email" class="form-control" id="email">
                </div>
                <textarea name="" id="" cols="30" rows="3" style="margin:5px 15px;">留言区</textarea>
                <div class="ipt">
                    <input type="submit">
                </div>
            </form>
        </div>
    </div>
    <div class="footer">
        <div class="container-fluid">
            <div class="col-md-12 col-xs-12">
                <p>&#169版权所有<a href="http://www.xynu.edu.cn/">信阳师范学院</a></p>
            </div>
        </div>
    </div>
    <script>
        var li = document.querySelectorAll('li');
        for (var i = 0; i < li.length; i++) {
            li[i].onclick = function() {
                for (var j = 0; j < li.length; j++) {
                    li[j].className = '';
                }
                this.className = 'active';
            }
        }
    </script>
</body>

</html>